<template>
	<view>
		<view class="logo-container d-flex a-center j-center">
			<image src="../../../static/images/logo1.png" style="height: 112upx;width: 390upx;" mode=""></image>
		</view>
		<view class="register-form">
			<view class="sun-form-item border-bottom">
				<text class="sun-label">手机号</text>
				<input v-model="infoData.mobile" type="text">
			</view>
			<view class="sun-form-item border-bottom">
				<text class="sun-label">验证码</text>
				<input v-model="infoData.captcha" type="text">
				<text v-if="!isShowCountDown" class="sun-veri-code" @tap="getCaptcha">获取验证码</text>
				<text v-else class="sun-veri-code">{{countDown}}秒后可重新发送</text>
			</view>
			<view class="sun-form-item border-bottom">
				<text class="sun-label">密码</text>
				<input v-model="infoData.password" type="password" placeholder="6-16个英文数字和特殊字符的组合">
			</view>
			<view class="sun-form-item border-bottom">
				<text class="sun-label">确认密码</text>
				<input v-model="infoData.passwordConfirm" type="password">
			</view>
			<view class="sun-form-item border-bottom">
				<text class="sun-label">用户名</text>
				<input v-model="infoData.username" type="text">
			</view>
			<view class="sun-form-item font-24" style="color: #CCCCCC;">
				<checkbox-group @change="onCheckBoxChange" name="protecol">
					<label>
						<checkbox ref="checkNode" style="transform:scale(0.6)" value="protecol" checked="false" /><text>注册即代表同意相关</text>
						<text style="color: #0062cc" @click="skipToPrivacyPolicy(2)">《注册协议》</text>、
						<text style="color: #0062cc" @click="skipToPrivacyPolicy(1)">《隐私政策》</text>
					</label>
				</checkbox-group>
			</view>
			<view class="sun-btn" @tap="executeRegister">
				<text class="font-30">注册账号</text>
			</view>
			<view @tap="toLoginPage" class="d-flex a-center j-center font-24" style="height: 60upx;">
				<text style="color: #CCCCCC;">已有账号，直接登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/lib/request.js';
	export default {
		data() {
			return {
				infoData: {
					username: "",
					email: "",
					mobile: "",
					password: "",
					passwordConfirm: "",
					captcha: ""
				},
				isAgree: false,
				phoneAuth: /^1[3456789]\d{9}$/,
				passAuth: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
				userAuth: /^[a-zA-Z]{2,4}$/,
				isShowCountDown: false,
				countDown: 60
			}
		},
		methods: {
			toLoginPage() {
				uni.redirectTo({
					url: '/pages/mine/login/login'
				});
			},
			executeRegister() {
				const _this = this;
				let password = this.infoData.password.trim();
				let passwordConfirm = this.infoData.passwordConfirm.trim();
				if (password != passwordConfirm) {
					uni.showToast({
						title: '两个密码不一致',
						icon: 'none'
					})
					return

				}
				if (!this.infoData.mobile.trim()) {
					uni.showToast({
						title: '手机号码不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.phoneAuth.test(this.infoData.mobile)) {
					uni.showToast({
						title: '请检查手机号格式是否正确',
						icon: 'none'
					})
					return
				}
				if (!this.passAuth.test(this.infoData.password)) {
					uni.showToast({
						title: '请检查密码格式是否正确',
						icon: 'none'
					})
					return
				}
				/*if (!this.userAuth.test(this.infoData.username)) {
					uni.showToast({
						title: '用户名只能为字母且长度不大于10',
						icon: 'none'
					})
					return
				}*/
				// if(!this.isAgree){
				// 	uni.showToast({
				// 		title: '请确认是否已勾选同意'
				// 	});
				// 	return
				// }
				api.request({
						url: '/register',
						method: 'POST',
						data: {
							username: _this.infoData.username,
							email: "",
							mobile: _this.infoData.mobile,
							password: _this.infoData.password,
							captcha: _this.infoData.captcha
						}
					})
					.then(response => {
					    if(response) {
                            uni.showToast({
                                title: '注册成功',
                                icon: 'none'
                            })
                            uni.redirectTo({
                                url: '/pages/mine/login/login'
                            });
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			onCheckBoxChange() {
				console.log(this.$refs.checkNode)
			},
			/**
			 * 获取验证码
			 */
			getCaptcha() {
				const _this = this;
				if (!this.infoData.mobile.trim()) {
					uni.showToast({
						title: '手机号未输入',
						icon: 'none'
					})
					return
				}
				if (!this.phoneAuth.test(this.infoData.mobile)) {
					uni.showToast({
						title: '请检查手机号格式是否正确',
						icon: 'none'
					})
					return
				}
				api.request({
						url: '/captcha',
						data: {
							mobile: _this.infoData.mobile,
							type: 1
						}
					})
					.then(response => {
						uni.showToast({
							title: '验证码已发送',
							icon: 'none'
						})
						_this.isShowCountDown = true;
						_this.countDown = 60;
						let timer = setInterval(() => {
							if (_this.countDown > 0) {
								_this.countDown--;
							} else {
								clearInterval(timer)
								_this.isShowCountDown = false;
								_this.countDown = 60;
							}
						}, 1000)
					})
					.catch(err => {
						uni.showToast({
							title: '验证码发送失败',
							icon: 'none'
						})
					});
			},
            skipToPrivacyPolicy(type){
                uni.navigateTo({
                    url: '/pages/mine/aboutUs/aboutUs?type=' + type
                })
            },
		}
	}
</script>

<style scoped>
	.logo-container {
		width: 100%;
		height: 375rpx;
	}

	.register-form {
		width: 570upx;
		padding: 30upx 90upx;
	}

	.sun-form-item {
		display: flex;
		margin-bottom: 20upx;
		height: 80upx;
		align-items: center;
	}

	.sun-form-item .sun-label {
		width: 120upx;
	}

	.sun-form-item input {
		flex: 1;
		font-size: 28upx;
	}

	.sun-btn {
		margin-top: 80upx;
		background-color: #005BAC;
		height: 90upx;
		color: white;
		text-align: center;
		line-height: 90upx;
	}

	.sun-veri-code {
		color: #005BAC;
		font-size: 28upx;
	}
</style>
